<template>
  <a-select
    v-model:value="selectValue"
    class="min-w-[160px]"
    placeholder="请选择"
    :options="options"
    mode="multiple"
    :virtual="false"
    allow-clear
    @change="onChange"
    @focus="onFocus"
  >
    <template v-if="loading" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>

<script setup>
/**
 * @name:选择关注项目
 */
import { ref, watchEffect, onMounted, watch } from 'vue'
import { post } from '@/utils/request'

const loading = ref(true)
const options = ref([])
const selectValue = ref([])
const emit = defineEmits(['update:value', 'change', 'success'])
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  trigger: {
    desc: '请求数据时机init:初始化/focus:聚焦',
    type: String,
    default: 'init'
  },
  params: {
    type: Object,
    desc: '请求参数',
    default: () => ({})
  }
})
const onChange = (value, option) => {
  selectValue.value = value
  emit('update:value', value)
  emit('change', value, option)
}
watchEffect(() => {
  selectValue.value = props.value || []
})
// 获取医生
const getData = async () => {
  loading.value = true
  const { code, data } = await post('/operation/opex/getDictFocusItemList', {
    pageNum: 1,
    pageSize: 999
  })
  loading.value = false
  if (code !== 0) return
  options.value = data.map((item) => {
    return {
      label: item.itemName,
      value: item.id
    }
  })
  emit('success', options.value)
}
watch(
  () => props.params?.ksdm,
  (val) => {
    if (val) {
      getData()
    }
  }
)
const onFocus = () => {
  props.trigger === 'focus' && getData()
}
onMounted(() => {
  props.trigger === 'init' && getData()
})
</script>
